<template>
	<div class="change-account">
		<div class="change-account-title">{{ $t('message.changeName') }}</div>
		<div class="change-account-label">
			<label for="username">{{ $t('message.name2') }}:</label>
		</div>
		<div class="change-account-input">
			<input type="text" id="username" :class="{ 'input-error': errorText }" v-model="usernameModel" @keyup.enter="checkUsername" spellcheck="false" />
		</div>
    <div class="error-tips" v-if="errorText">
      {{ errorText }}
    </div>
		<div class="change-account-btn-group">
			<button type="button" class="btn-item btn-confirm" @click="checkUsername">{{ $t('message.save') }}</button>
			<button type="button" class="btn-item btn-cancle" @click="closeDialog">{{ $t('message.no') }}</button>
		</div>
	</div>
</template>

<script>
import {setCookie} from '@/util/util'

export default {
  name: 'PersonalAccountChangeUser',
  props: {
    username: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      errorStatus: 0,
      usernameModel: this.username
    }
  },
  computed: {
    errorText () {
      switch (this.errorStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.nameError')
        case 3:
          return this.$t('message.registerError1')
        case 4:
          return this.$t('message.registerError2')
        case 5:
          return this.$t('message.registerError3')
        case 6:
          return this.$t('message.changeFail')
      }
    }
  },
  watch: {
    usernameModel (val) {
      this.errorStatus = 0
    }
  },
  methods: {
    checkUsername () {
      let username = this.usernameModel
      if (username === this.username) {
        this.closeDialog()
      } else if (username === '') {
        this.errorStatus = 2
      } else if (!/^.{3,15}$/.test(username)) {
        this.errorStatus = 3
      } else if (!/^[a-zA-Z0-9]{3,15}$/.test(username)) {
        this.errorStatus = 4
      } else {
        this.$ajax.duplicateChecking({
          type: 'user_name',
          text: username
        }).post.then((res) => {
          if (res.code === 200) {
            this.errorStatus = 1
            this.changeUsername()
          } else if (res.code === 202) {
            this.errorStatus = 5
          }
        })
      }
    },
    changeUsername () {
      this.$ajax.modifyUserName({
        new_user_name: this.usernameModel
      }).then((res) => {
        if (res.code === 200) {
          this.$emit('change-val', this.usernameModel)
          setCookie('username', this.usernameModel)
          let profile = this.$store.state.loginUser.profile
          let unreadMsg = this.$store.state.loginUser.unreadMsg
          this.$store.commit('updateLoginUser', {
            username: this.usernameModel,
            profile: profile,
            unreadMsg: unreadMsg
          })
        } else if (res.code === 202) {
          this.errorStatus = 6
        }
      })
    },
    closeDialog () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.change-account {
	width: 416px;
	padding: 40px;
	background-color: #fff;
}

.change-account-title {
	height: 28px;
	line-height: 28px;
	font-size: 20px;
	color: #333;
	text-align: center;
}

.change-account-label {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	margin-top: 40px;
}

.change-account-input {
	width: 416px;
	height: 48px;
	margin-top: 12px;
}

.change-account-input input {
	width: 384px;
	height: 46px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	padding: 0 15px;
}

.change-account-btn-group {
	margin-top: 40px;
	font-size: 0;
}

.change-account-btn-group .btn-item {
	width: 200px;
	height: 48px;
	border-radius: 2px;
	font-size: 16px;
	cursor: pointer;
}

.change-account-btn-group .btn-confirm {
	border: 1px solid #ff600a;
	background-color: #ff600a;
	color: #fff;
	margin-right: 16px;
}
  .change-account-btn-group .btn-confirm:disabled {
    cursor: not-allowed;
  }

.change-account-btn-group .btn-confirm:hover {
	background-color: #ff3c00;
}

.change-account-btn-group .btn-confirm:active {
	background-color: #e83700;
}

.change-account-btn-group .btn-cancle {
	border: 1px solid #d7d7d7;
	background-color: #fff;
	color: #a5a5a5;
}
</style>
